// 采用的时ES6的语法
let vm = new Vue({
        el: '#register',
        //修改Vue读取变量的语法
        delimiters: ['[[', ']]'],
        data: {
            // 用户基本信息
            username: '',
            mobile: '',
            password: '',
            password2: '',
            allow: '',

            error_name: false,
            error_mobile: false,
            error_password: false,
            error_password2: false,
            error_allow: false,

            error_name_message: '',
            error_mobile_message: '',

            // 图片验证码
            code_img:'',
            code_img_url: '',
            img_count: 0,   //在不改变uuid的情况下，修改图片验证码请求路径，减轻redis数据库负担，优化内存
            error_code_img: false,
            error_code_img_msg: '',

            // 短信验证码
            code_sms:'',
            send_sms: '获取短信验证码',
            send_flag: true, // 发送功能标志，初始发送功能开启
            error_code_sms: false,
            error_code_sms_msg: '',
        },
        //页面加载完后会被调用
        mounted() {
            let uuid = generateUUID();
            this.code_img_url = '/codeImg/' + uuid + '/';
        },
        methods: {
            // 获取短信验证码
            get_code_sms(){
                if(!this.send_flag){
                    //已发送 send_flag=false 发送功能关闭
                    return;
                }

                // 检查图片验证码和手机号是否有误
                    // 由于字段初始值为空且无误，故需先将空字段设为有误。
                if(!this.mobile){
                    this.error_mobile_message = '手机号不能为空';
                    this.error_mobile = true;
                }
                if(!this.code_img){
                    this.error_code_img_msg = '请填写图形验证码';
                    this.error_code_img= true;
                }
                    // 此时空字段已设为有误，非空字段也已通过检查，便可以直接检查所有字段是否有误了
                if(this.error_mobile || this.error_code_img)
                {
                    this.get_code_img(); //输入有误，更新图片验证码
                    return;
                }else

                // 发送请求
                this.send_flag = false; //短信即将发送，关闭发送功能，禁止重复发送
                let url = '/codeSMS/'+ this.code_img_url.slice(9) + this.code_img + '/' + this.mobile;
                axios.get(url, {'ReponseType': 'json'})
                    .then(response => {
                        switch(response.data.code){
                            case 200:   //短信发送成功
                                this.error_code_sms = true;
                                this.error_code_sms_msg = response.data.errmsg;
                                // 展示倒计时60秒效果
                                let time = 60;
                                let t = setInterval(() => {
                                    if (time) {
                                        // 正在倒计时
                                        time -= 1;
                                        this.send_sms = '已发送' + time + '秒';
                                    }
                                    else {
                                        // 倒计时结束
                                        clearInterval(t); // 停止回调函数的执行
                                        this.send_sms = '重新发送短信验证码'; // 可再次获取短信验证码
                                        this.get_code_img(); // 重新生成图形验证码
                                        this.send_flag = true; // 开启短信发送功能
                                    }
                                }, 1000);
                                break;
                            case 401:   //图片验证码错误
                                this.error_code_img = true;
                                this.error_code_img_msg = response.data.errmsg;
                                this.send_flag = true; // 开启短信发送功能
                                break;
                            case 402:   //短信发送失败
                                this.error_code_sms = true;
                                this.error_code_sms_msg = response.data.errmsg;
                                this.send_flag = true; // 开启短信发送功能
                                break;
                        }

                    })
                    .catch(error => {
                                console.log(error.response);
                            })
            },
            // 检查是否填写短信验证码
            check_code_sms(){
                if(!this.code_sms) {
                    this.error_code_sms= true;
                    this.error_code_sms_msg = '请填写短信验证码';
                }else{
                    this.error_code_sms= false;
                }
            },
            //获取验证码图片
            get_code_img() {
                //通过修改图片链接自动获取
                this.img_count += 1;
                // console.log(this.code_img_url+this.img_count.toString());
            },
            // 检查是否填写图片验证码
            check_code_img(){
                if(!this.code_img) {
                    this.error_code_img= true;
                    this.error_code_img_msg = '请填写图形验证码';
                }else{
                    this.error_code_img= false;
                }
            },

            check_username() {
                // 检查用户名是否正确
                let re = /^[0-9a-zA-Z_-]{5,20}$/;
                if (re.test(this.username)) {
                    this.error_name = false;
                    // 检查用户名是否重复
                    let url = '/usernames/' + this.username + '/count/';
                    axios.get(url, {'ReponseType': 'json'})
                        .then(response => {
                            if (response.data.count) {
                                this.error_name_message = '用户名已存在';
                                this.error_name = true;
                            }
                        })
                        .catch(error => {
                            console.log(error.response);
                        })

                } else {
                    this.error_name_message = '用户名必须是由5-20个字母、数字、下划线或横杠组成';
                    this.error_name = true;
                }

            },

            check_mobile() {
                if (!this.mobile){
                    this.error_mobile_message = '手机号不能为空';
                    this.error_mobile = true;
                    return;
                }
                let re = /^1[3-9]\d{9}$/;
                if (re.test(this.mobile)) {
                    // 检查手机号是否重复
                    this.error_mobile = false;
                    let url = '/mobile/' + this.mobile + '/count/';
                    axios.get(url, {'ReponseType': 'json'})
                        .then(response => {

                            if (response.data.count) {
                                this.error_mobile_message = '手机号已被注册';
                                this.error_mobile = true;
                                console.log('check_mobile: error_mobile '+this.error_mobile);
                            }
                        })
                        .catch(error => {
                            console.log(error.response);
                        });
                }
                else {
                    this.error_mobile_message = '手机号必须是11位的有效号码';
                    this.error_mobile = true;
                }
            },

            check_password() {
                let re = /^[a-zA-Z0-9]{8,20}$/;
                if (re.test(this.password)) {
                    this.error_password = false;
                } else {
                    this.error_password = true;
                }

            },

            check_password2() {
                if (this.password == this.password2) {
                    this.error_password2 = false;
                } else {
                    this.error_password2 = true;
                }
            },

            check_allow() {
                if(this.allow){
                    this.error_allow = false;
                }
                else {
                    this.error_allow = true;
                }

            },

            on_submit() {

                this.check_allow();
                this.check_code_img();
                this.check_mobile();
                this.check_username();
                this.check_password();
                this.check_password2();

                if (this.error_name || this.error_allow || this.error_mobile ||
                    this.error_password || this.error_password2 || this.error_code_sms)
                {
                    window.event.returnValue = false;
                }
            }
            ,
        },
    })
;
